<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">
    <link rel="stylesheet" href="demo.css">

    <title>淘宝网-淘！我喜欢</title>

    <style type="text/css">
        /* 首页背景贴图 */
        html {
            height: 100%;
            /* 高度填充整个窗口 */
        }

        body {
            /* height: 100%; */
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            background-color: #F5F5F5;
            /* 整个页面背景为淡灰色 */

            background-size: 100% 100%;
        }

        .my-container {
            position: fixed;
            /*固定定位*/
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;

            display: flex;
            flex-direction: column;
            align-items: center;


            /*background-color: red;*/
        }

        /* 头导航栏 */
        .my-header {

            /*绝对定位，即相对于父元素的定位*/

            width: 100%;
            height: 40px;
            margin-top: 10px;

            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/

            /* background-color:#ff3050; */

        }

        .my-main {
            /* position: absolute; */
            margin-left: 0px;
            /* top: 40px; */
            margin-right: 0px;
            bottom: 40px;
            /* 实现滑动 */
            overflow: auto;
        }

        .my-footer {

            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;

            display: flex;
            flex-direction: row;

            border-top: 0.2px solid white;
            /*边框 粗细、线型、颜色 */

            /* background-color: #FFFFFF; */
            /* background: pink; */
            /* color: #fff; */
            /* 加粗 */
            font-weight: bold;
            /*线性渐变*/
            /* background-image: linear-gradient(to right,#ff5000 0,#ff0000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            /* border-radius: 6px 6px 0 0; */

        }

        .my-header-item {
            /* color: black; */
            /*文字颜色*/
            margin: 0 5px 0 0;
            /* 上右下左四个外边距 */
            width: 45px;
            text-align: center;
            /*内部文本水平居中*/
            /* border-radius: 10px; */
            /*设置边框圆角半径*/

        }

        /* .my-header-item:active { */
        /*点击时的样式*/
        /* background-color: red;
            color: yellow; */
        /* background-image: linear-gradient(to right, #ff7f44 0, #ff6262 100%); */
        /*滤镜*/
        /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */

        /* } */

        .my-footer-item {
            border-right: 1px solid #EEEEEE;
            height: 100%;
            color: black;
            /*font-size:20px;*/

            flex: 1 1 auto;
            /*设置在flex容器的元素上，用于设置自适应缩放*/

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            padding-top: 3px;
            border-radius: 50px 50px 50px 50px;

        }

        .my-home {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .my-card {

            width: 96%;
            height: 180px;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            box-shadow: 0 0 5px 1px #CCCCCC;

            background-color: white;
            /*
                opacity: 0.3;
            */
            /*background: transparent;*/
            /*传递父元素的背景，即背景透明*/
            margin: 5px 0 5px 0;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;





        }

        .my-goods-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .my-goods-info>div {
            margin-bottom: 5px;
        }



        .searchContent {
            height: 40px;
        }

        .my-btn-search {
            position: absolute;
            top: 1px;
            right: 2px;
            width: 50px;
            height: 30px;
            text-align: center;
            font-size: 15px;
            line-height: 14px;
            color: #fff;
            border: none;
            background-image: linear-gradient(to right, #ff6000 0, #ff2000 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff6000', endColorstr='#ffff2000', GradientType=1);
            border-radius: 20px 20px 20px 20px;
        }

        .searchBox {
            margin-left: 10px;
            margin-top: 2px;
            width: 290px;
            height: 35px;
            background-color: white;
            box-sizing: border-box;
            border: 2px solid white;
            border-right: none;
            border-radius: 20px 20px 20px 20px;
            /* overflow: hidden; */
            position: relative;
        }

        .searchBox input {
            position: absolute;
            margin-top: 2px;
            width: 284px;
            height: 30px;
            line-height: 36px;
            padding-right: 90px;
            padding-left: 8px;
            outline: none;
            /* 去掉文本框的外轮廓 */
            border: none;
            /* 去掉边框 */
            text-indent: 10px;
            /*透明 将input和placeholder透在同一层 为了能够看到后面的文字*/
            z-index: 2;
            background-color: transparent;
        }

        .searchBox .placeholder {
            position: absolute;
            top: 2px;
            left: 14px;
            color: #9c9c9c;
        }

        /* .searchBox>.placeholder { */


        /* vertical-align: 2px; */
        /* } */

        .searchBox>.imgSearch {
            position: absolute;
            /* font-size: 18px; */
            /* color: #9c9c9c; */
            right: 60px;
            top: 2px;
            cursor: pointer;
        }

        .my-header>span.scancode {
            /* position: absolute; */
            margin-top: 5px;
            margin-left: 10px;
            color: white;
            /* vertical-align: 30px; */

        }

        .my-header>span.qrcode {
            position: absolute;
            top: 15px;
            right: 8px;
            color: white;
            /* vertical-align: 30px; */

        }

        /* 导航栏 */
        .hotKey {
            width: 98%;
            height: 25px;
            margin-left: 4px;
            line-height: 25px;
            /* height: 40px; */
            /* background: pink; */
            /* color: white; */
            /* font-weight: bold; */

            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/

            /*线性渐变*/
            /* background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); */
            /* border-radius: 6px 6px 0 0; */
        }

        .hotKey>li {
            /* position: relative; */
            margin-left: 6px;
            color: #e7e6e6;
            /* margin-right: 8px; */
            padding-right: 20px;
            /* padding-left: 10px; */
            /* cursor: pointer; */
        }

        .hotKey>li.active {
            /* position: absolute; */
            font-size: 18px;
            margin-left: 12px;
            color: white;
            font-weight: bold;
        }

        .hotKey>i {
            position: absolute;
            right: 10px;
            background-image: url(resources/images/fbackground.png);
        }

        /* 图片1容器 */
        .img1Box {

            /* overflow: hidden; */
            width: 97%;
            height: 120px;
            margin-left: 5px;
            /* background: #eee; */
            border-radius: 10px 10px 10px 10px;


        }

        .img2Box {
            /* overflow: hidden; */
            width: 97%;
            height: 130px;
            margin-left: 6px;
            margin-top: 14PX;
            /* align-items: center; */
            /* text-align: center; */
            /* background: #d5d5d5; */
            border-radius: 10px 10px 10px 10px;
        }

        .img2Box>.type {
            /* position: absolute; */
            font-size: 23px;
            color: white;
            margin-top: 0px;
            /* 加粗 */
            font-weight: bold;
            text-align: center;
            /* align-items: center; */
            /* background-size: 100% 100%; */
        }

        .img2Box>.i1 {
            /* margin-right: 2px; */
            border-radius: 10px 10px 10px 10px;
        }

        .img3Box {
            /* overflow: hidden; */
            width: 99%;
            margin-left: 2px;

            /* background-color: white; */

            /* text-align: center; */
            /* background: #d5d5d5; */
            border-radius: 5px 5px 5px 5px;

            display: flex;
            flex-direction: column;
            align-items: center;

            position: absolute;
            top: 340px;
            bottom: 0px;
            left: 0;
            right: 0;

        }

        .img3Box>.h>.tb {
            /* position: absolute; */
            font-size: 23px;
            color: #ff3050;
            /* 加粗 */
            font-weight: bold;
            text-align: center;
            /* align-items: center; */
            /* background-size: 100% 100%; */
            /* font-style: linear-gradient(to right, #ff6000 0, #ff2000 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff6000', endColorstr='#ffff2000', GradientType=1); */
        }

        .img3Box>.h>.ts {
            width: 110px;
            height: 23px;
            font-size: 15px;
            color: white;
            background-color: #ff3030;
            margin-left: 126px;
            text-align: center;
            border-radius: 20px 20px 20px 20px;
            /* 加粗 */
            font-weight: bold;
            /* align-items: center; */

        }

        .img3Box>.img3 {
            /* margin-right: 2px; */
            width: 99%;

            /* background-color: white; */
            border-radius: 10px 10px 10px 10px;

            position: absolute;
            top: 60px;
            bottom: 0;
            /* 实现页面滑动 */
            overflow: auto;
        }

        .my-mine {
            position: absolute;
            width: 364px;
            height: 740px;
            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
        }

        .im {
            position: absolute;
            width: 120px;
            height: 120px;
            /* background-color: #cccccc; */
            left: 122px;
            /* align-content: center; */
            top: 100PX;
            border-radius: 58px 58px 58px 58px;
        }

        .it1 {
            width: 150px;
            height: 53px;
            margin-top: 300px;
            margin-left: 16px;
            margin-right: 16px;
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            /* background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            border-radius: 25px 25px 25px 25px;
        }

        .it1:active {
            background-image: linear-gradient(to right, #ff7f44 0, #ff6262 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }

        .it2 {
            position: absolute;
            width: 150px;
            height: 53px;
            bottom: 20px;
            /* margin-top: 300px; */
            left: 106px;
            /* right: 160px; */
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            /* background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            border-radius: 25px 25px 25px 25px;
        }

        .it2:active {
            background-image: linear-gradient(to right, rgb(112, 217, 255), #be4eff 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }

        .my-header-item {
            /* position: absolute; */
            color: white;
            font-weight: bold;
            margin-left: 52px;
            font-size: 22px;
            margin-top: 10px;
            /* text-align: center; */
            /* align-content: center; */
        }


        /* 弹窗样式 */
        .my-goods-details {
            box-sizing: border-box;
            /*width、height包含边框和内边距  为好计算宽高值  默认不包含的*/
            border: 1px solid #888888;
            border-radius: 10px;
            box-shadow: 0 0 10px 1px #AAAAAA;

            position: fixed;
            bottom: 50%;
            left: 50%;
            right: 50%;
            height: 0;
            background-color: white;

            /*过渡效果 切换时高度，左右，下变换时间*/
            transition: height 0.1s, right 0.1s, left 0.1s, bottom 0.1s;
            overflow: hidden;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        .my-goods-details>* {
            margin: 3px 5px 3px 5px;
        }
    </style>

</head>

<body>

    <div id="app" class="my-container">
        <div style="background-image: url(resources/images/fbackground.png);position:absolute;top:0;bottom:50px;width:100%;"
            v-if="currVisible=='home'">
            <div class="my-header">
                <!-- 扫描图标 -->
                <span class="scancode"><i class="fa fa-minus-square-o fa-2x" style="color:white;"
                        aria-hidden="true"></i></span>
                <div class="searchContent">

                    <div class="searchBox" @click="toSearch">
                        <!-- 文本搜索框 -->
                        <input type="text" />
                        <div class="placeholder">
                            <!-- 搜索图标 -->
                            <span><i class="fa fa-search fa-lg" style="color:#9c9c9c;" aria-hidden="true"></i></span>
                            <span>网红裤腰带</span>
                        </div>
                        <!-- 相机图标 -->
                        <span class="imgSearch"><i class="fa fa-camera-retro fa-lg" style="color:#9c9c9c;"
                                aria-hidden="true"></i></span>
                        <button class="my-btn-search" type="button">搜索</button>
                    </div>


                </div>
                <!-- 二维码图标 -->
                <span class="qrcode"><i class="fa fa-qrcode fa-2x" style="color:white;" aria-hidden="true"></i></span>

                <!-- <div class="my-header-item">登录</div>
            <div class="my-header-item">注册</div>         -->
            </div>
            <!-- 导航栏 -->
            <div class="hotKey" @click="toThings">
                <li class="active">首页</li>
                <li>美妆</li>
                <li>食品</li>
                <li>女装</li>
                <li>电器</li>
                <li>百货</li>
                <!-- <li>鞋靴</li>
                <li>箱包</li>
                <li>母婴</li>
                <li>手机</li>
                <li>保健</li>
                <li>男装</li>
                <li>饰品</li>
                <li>洗护</li> -->
                <i class="fa fa-bars" style="color: white;" aria-hidden="true"></i>
                <!-- <div class="menus" v-if=false> -->
                <!-- "currVisible=='mine'" -->
                <!-- <li class="active">首页</li>
                    <li>美妆</li>
                    <li>女装</li>
                    <li>鞋靴</li>
                    <li>食品</li>
                    <li>电器</li>
                    <li>箱包</li>
                    <li>母婴</li>
                    <li>手机</li>
                    <li>保健</li>
                    <li>百货</li>
                    <li>男装</li>
                    <li>饰品</li>
                    <li>洗护</li>
                </div> -->
            </div>
            <!-- 图片1容器 -->
            <div class="img1Box" @click="toThings">
                <!-- <div class="pic fl"> -->
                <div class="img1">
                    <a href="#"><img src="resources/images/pic_01.jpg" style="width:100%;height:100%;"></a>
                </div>
                <!-- 有点击功能的按钮 -->
                <!-- <button class="leftBtn"></button> -->
                <!-- </div> -->
                <!-- <div class="ad"></div> -->
            </div>
            <!-- 图片2容器 -->
            <div class="img2Box">
                <div class="type">
                    淘主会场
                </div>
                <div class="img2">
                    <div class="i1">
                        <a href="#" @click="toThings"><img src="resources/images/pic_02.jpg"
                                style="margin-top: 4px;width:23%;height:25%;"></a>
                        <a href="#" @click="toThings"><img src="resources/images/pic_03.jpg"
                                style="margin-top: -5px;width:25%;height:25%;"></a>
                        <a href="#" @click="toThings"><img src="resources/images/pic_04.jpg"
                                style="margin-top: -5px;width:25%;height:25%;"></a>
                        <a href="#" @click="toThings"><img src="resources/images/pic_05.jpg"
                                style="margin-top: 4px;width:23%;height:25%;"></a>
                    </div>
                </div>
            </div>
            <!-- 图片3容器 -->
            <div class="img3Box">
                <div class="h" style="width:100%;height:60px;background-color: white;border-radius: 5px 5px 5px 5px;">
                    <div class="tb">全部</div>
                    <div class="ts">猜你喜欢</div>
                </div>
                <div class="img3">
                    <div class="my-main">
                        <div class="my-home" v-if="currVisible=='home'">
                            <div v-for="goods in list" class="my-card" style="width: 100%;height: 100%;">
                                <img :src="$server.baseURL() + goods.picure" style="height:160px;">
                                <div class="my-goods-info" style="margin-left:10px;">
                                    <div style="font-weight: bold;">{{goods.name}} <span
                                            style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goods.price}}</span>
                                    </div>
                                    <div style="height:70px;overflow:hidden;">{{goods.goods}}</div>
                                    <div>
                                        <button @click="execAddCart(goods.id)" type="button"
                                            class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i>
                                            加入购物车
                                        </button>
                                        <!-- 详情按钮  超链接 样式拷贝 -->
                                        <a class="btn btn-outline-danger btn-sm" href="#"
                                            @click="showGoodsDetails(goods)">详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <a href="#"><img src="resources/images/pic_02.jpg" style="position: relative;top: 10px;width:24%;height:25%;"></a>
                        <a href="#"><img src="resources/images/pic_03.jpg" style="position: relative;top: 5px;width:24%;height:25%;"></a>
                        <a href="#"><img src="resources/images/pic_04.jpg" style="position: relative;top: 5px;width:24%;height:25%;"></a>
                        <a href="#"><img src="resources/images/pic_05.jpg" style="position: relative;top: 10px;width:24%;height:25%;"></a> -->

                </div>
            </div>

        </div>


        <div class="my-search" v-if="currVisible=='search'">
            购物车
        </div>


        <!-- <div class="my-mine" @click="tominelg_mine">
            <div class="im">
                <img src="resources/images/pic_07.jpg"
                    style="width:100%;height:100%;border-radius: 58px 58px 58px 58px;">
            </div>

        </div> -->

        <div class="my-footer">
            <!-- 若点击则是灰色，不点则是白色 -->
            <div id="home" class="my-footer-item" @click="currVisible='home'"
                :style="{backgroundColor:currVisible=='home'?'#ff3030':'#FFFFFF'}">
                <i class="fa fa-home fa-lg"></i>
                <span style="font-size:14px;">淘首页</span>
            </div>
            <div id="search" class="my-footer-item" @click="currVisible='search'"
                :style="{backgroundColor:currVisible=='search'?'#ff3030':'white'}">
                <i class="fa fa-shopping-cart fa-lg"></i>
                <span style="font-size:14px;">购物车</span>
            </div>
            <div id="mine" class="my-footer-item" @click="tominelg_mine" style="border-right:none;"
                :style="{backgroundColor:currVisible=='mine'?'#ff3030':'white'}">
                <i class="fa fa-user fa-lg"></i>
                <span style="font-size:14px;">我的</span>
            </div>
        </div>



        <!-- 透明的div  商品细节框显示：false -->
        <div v-show="goodsDetailsVisible" @click="goodsDetailsVisible=false"
            style="position:fixed;left:0;right:0;top:0;bottom:0;">
        </div>
        <!-- 商品详情框 -->
        <div class="my-goods-details"
            :style="{height:(goodsDetailsVisible?'75%':'0px'),left:(goodsDetailsVisible?'10px':'50%'),right:(goodsDetailsVisible?'10px':'50%'),bottom:(goodsDetailsVisible?'10%':'50%'),overflow:(goodsDetailsVisible?'auto':'hidden')}">
            <!-- 显示时高度为75%，居左10px，居右10px，底部10%，滚动条自动出现 -->
            <img :src="$server.baseURL() + goodsDetails.picure" style="width:90%;" />

            <div style="font-weight: bold;">{{goodsDetails.name}} <span
                    style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goodsDetails.price}}</span></div>

            <div style="margin-bottom:20px;">{{goodsDetails.goods}}</div>

            <div>

                <button @click="execAddCart(goodsDetails.id)" type="button" class="btn btn-danger btn-sm"><i
                        class="fa fa-shopping-cart"></i>
                    加购物车</button>

            </div>

        </div>


    </div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变；需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el: '#app',//指定渲染的元素
        data: {//定义数据
            list: [],
            currVisible: 'home',

            //当前登录账号
            loginUserID: null,
            person: {},

            //查询参数
            searchParam: '',

            //商品详情是否显示
            goodsDetailsVisible: false,
            goodsDetails: {},//商品详情

            execAddCart(z_id) {
                this.$post("execAddCart.jsp", { zid: z_id })
                    .then(() => {

                    });
            }

        },
        methods: {//定义方法


            execAddCart(g_id) {

                this.$get('/currUserID.jsp')
                    .then((result) => {

                        // this.loginUserID = result.data;

                        // if (!this.loginUserID) {
                        //     layer.open({
                        //         content: '请先登录！'
                        //         , skin: 'msg'
                        //         , time: 2 //2秒后自动关闭
                        //         , style: 'border:none; background-color:#DD0000; color:#fff;'
                        //     });
                        //     return;
                        // }

                        this.$post('execAddCart.jsp', { gid: g_id })
                            .then(() => { });

                    });


            },

            //调转到注册页
            toRegister() {
                location.href = 'register.html';
            },
            toLogin() {
                location.href = 'login.html';
            },
            tominelg_mine() {
                location.href = 'minelg_mine.html';
            },
            toSearch() {
                location.href = 'search.html';
            },
            toThings() {
                location.href = 'things.html';
            },
            execLogout() {
                this.$post('/execLogout.jsp')
                    .then(() => {
                        this.loginUserID = null;
                    });
                location.href = 'home.html';
            },
            //查询商品
            execSearch() {
                this.$get('/1.jsp', { params: { searchParam: this.searchParam } })
                    .then((data) => {
                        this.list = data;
                    });
            },

            // 显示商品详情  接受参数goods，且商品详情参数设为true
            showGoodsDetails(goods) {
                this.goodsDetails = goods;
                this.goodsDetailsVisible = true;
            }
        },
        mounted() {//定义界面渲染完成后需要执行的代码
            //document.querySelector('#home').style.backgroundColor='#EEEEEE';
            this.currVisible = 'home';

            this.$setServerConfig({
                ip: 'localhost',
                port: 8080,
                app: 'xxx'
            });
            this.$get('http://localhost:8080/xxx/1.jsp')
                .then((data) => {
                    this.list = data;
                    console.log(this.list);
                });
            this.$get('http://localhost:8080/xxx/2.jsp')
                .then((data) => {
                    this.person = data;
                    console.log(this.person);
                });

            //获取登录用户
            this.$get('/currUserID.jsp')
                .then((result) => {
                    this.loginUserID = result.data;
                });

        }
    });









</script>


</html>